<script setup>
import { ref, watch } from 'vue';

const arr = ref([1,2,3,4,5])

// 整个数组变化
const changeArr = () => {
    arr.value = [6,7,8,9,10]
}
// 按下标改数据
const changeByIndex = () => {
    arr.value[2] = 100
}
// 用 push 函数改数据
const changeByPush = () => {
    arr.value.push(100)
}

watch(arr, () => {
    console.log('arr变化了');
}, {deep: true})
</script>

<template>
    <div>
        {{ arr }}
        <button @click="changeArr">数据本体变化</button>
        <button @click="changeByIndex">数组下标修改元素</button>
        <button @click="changeByPush">原生函数修改数据</button>
    </div>
</template>
  
<style lang="less">

</style>

  